import React, { useEffect, useState, useRef } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { Card, Row, Col, Button, message } from 'antd';
import { history } from 'umi';
import { Area } from '@ant-design/charts'; 
import moment from 'moment';
import request from '@/utils/request';
import NoticeModal from './components/NoticeModal';
import style from './index.less';
import jy_data01 from '../../../assets/jy_data01.png';
import jy_data02 from '../../../assets/jy_data02.png';
import jy_data03 from '../../../assets/jy_data03.png';
import jy_data04 from '../../../assets/jy_data04.png';
import jy_data05 from '../../../assets/jy_data05.png';
import used01 from '../../../assets/c_used_01.png';
import used02 from '../../../assets/c_used_02.png';
import used03 from '../../../assets/c_used_03.png';
import used04 from '../../../assets/c_used_04.png';
import used05 from '../../../assets/c_used_05.png';
import used06 from '../../../assets/c_used_06.png';
import used07 from '../../../assets/c_used_07.png';
import used08 from '../../../assets/c_used_08.png';

export async function getDetail() {
  return request(`/api/statistics/shop/business`, {
    method: 'get',
    // data,
  });
}


export default (): React.ReactNode => {

  const [detail, setDetail] = useState<any>({});
  const noticeRef = useRef();

  useEffect(() => {
    getDetail().then(res => {
      setDetail(res?.data)
    })
  }, [])


  return (
    <PageHeaderWrapper>
      <Row gutter={30}>
        <Col span={18} >
          <Card title="经营数据">
            <ul className={style['jy_ul']}>
              <li className={style['jy_li']}>
                <img src={jy_data01} alt="" />
                <div className={style['jy_right']}>
                  <p className={style['jy_title']}>今日营业额</p>
                  <p className={style['jy_num']}>{detail?.all_price}</p>
                </div>
              </li>
              <li className={style['jy_li']}>
                <img src={jy_data02} alt="" />
                <div className={style['jy_right']}>
                  <p className={style['jy_title']}>未支付订单数</p>
                  <p className={style['jy_num']}>{detail?.wait_number}</p>
                </div>
              </li>
              <li className={style['jy_li']}>
                <img src={jy_data03} alt="" />
                <div className={style['jy_right']}>
                  <p className={style['jy_title']}>今日订单数量</p>
                  <p className={style['jy_num']}>{detail?.order_number}</p>
                </div>
              </li>
              <li className={style['jy_li']}>
                <img src={jy_data04} alt="" />
                <div className={style['jy_right']}>
                  <p className={style['jy_title']}>今日新增会员</p>
                  <p className={style['jy_num']}>{detail?.takeout_number}</p>
                </div>
              </li>
              <li className={style['jy_li']}>
                <img src={jy_data05} alt="" />
                <div className={style['jy_right']}>
                  <p className={style['jy_title']}>今日新增粉丝</p>
                  <p className={style['jy_num']}>{detail?.takeout_number}</p>
                </div>
              </li>
            </ul>
          </Card>
        </Col>
        <Col span={6}>
          <Card title="账号信息">
            <div className={style['member_wrapper']}>
              <div className={style['member_days']}><span>300</span>天</div>
              <p className={style['member_tips']}>普通会员到期时间</p>
              <Button className={style['member_btn']} type='primary' onClick={() => message.info('开发中...')}>立即续费</Button>
            </div>
          </Card>
        </Col>
      </Row>
      <Row gutter={30} className={style['row']}>
        <Col span={18} >
          <Card title="统计数据">
            <Area
              color="#249AFF"
              xField="timePeriod"
              height={210}
              yField="销售金额"
              xAxis={
                {
                  range: [0, 1],
                }
              }
              areaStyle={() => {
                return {
                  fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff'
                }
              }}
              smooth
              data={[
                {
                  "timePeriod": "2023.06.01",
                  "销售金额": 100
                },
                {
                  "timePeriod": "2023.06.02",
                  "销售金额": 108
                },
                {
                  "timePeriod": "2023.06.03",
                  "销售金额": 117
                },
                {
                  "timePeriod": "2023.06.04",
                  "销售金额": 400
                },
                {
                  "timePeriod": "2023.06.05",
                  "销售金额": 300
                },
                {
                  "timePeriod": "2023.06.06",
                  "销售金额": 141
                },
                {
                  "timePeriod": "2023.06.07",
                  "销售金额": 152
                },
                {
                  "timePeriod": "2023.06.08",
                  "销售金额": 167
                },
              ]}
            />
          </Card>
        </Col>
        <Col span={6}>
          <Card title="管理公告">
            <ul className={style['announcement_ul']}>
              {
                detail?.noticeList?.map((notion: any) => {
                  return (
                    <li onClick={() => noticeRef?.current?.edit(notion)} className={style['announcement_li']}>[{moment((notion.create_at as number) * 1000).format('YYYY-MM-DD')}] {notion.name}</li>
                  )
                })
              }
              
            </ul>
          </Card>
        </Col>
      </Row>

      <Row gutter={30} className={style['row']}>
        <Col span={18} >
          <Card title="常用功能">
            <ul className={style['used_fun_ul']}>
              <li className={style['used_fun_li']} onClick={() => history.push({ pathname: '/goods/create' })}>
                <div className={style['used_fun_img']}><img src={used01} /></div>
                <p>新建商品</p>
              </li>
              <li className={style['used_fun_li']} onClick={() => history.push({ pathname: '/' })}>
                <div className={style['used_fun_img']}><img src={used02} /></div>
                <p>数据统计</p>
              </li>
              <li className={style['used_fun_li']} onClick={() => history.push({ pathname: '/store/furnish/1/1' })}>
                <div className={style['used_fun_img']}><img src={used03} /></div>
                <p>发布小程序</p>
              </li>
              <li className={style['used_fun_li']} onClick={() => history.push({ pathname: '/store' })}>
                <div className={style['used_fun_img']}><img src={used04} /></div>
                <p>店铺设计</p>
              </li>
              <li className={style['used_fun_li']} onClick={() => message.info('开发中...')}>
                <div className={style['used_fun_img']}><img src={used05} /></div>
                <p>会员管理</p>
              </li>
              <li className={style['used_fun_li']} onClick={() => message.info('开发中...')}>
                <div className={style['used_fun_img']}><img src={used06} /></div>
                <p>财务管理</p>
              </li>
              <li className={style['used_fun_li']} onClick={() => history.push({ pathname: '/merchant/app' })}>
                <div className={style['used_fun_img']}><img src={used07} /></div>
                <p>支付设置</p>
              </li>
              <li className={style['used_fun_li']} onClick={() => history.push({ pathname: '/marketing/interactive' })}>
                <div className={style['used_fun_img']}><img src={used08} /></div>
                <p>高级设置</p>
              </li>
            </ul>
          </Card>
        </Col>
        <Col span={6}>
          <Card title="帮助文档">
            <ul className={style['announcement_ul']}>
              <li className={style['announcement_li']} onClick={() => message.info('开发中...')}>系统功能介绍</li>
              <li className={style['announcement_li']} onClick={() => message.info('开发中...')}>微信支付开通指南</li>
              <li className={style['announcement_li']} onClick={() => message.info('开发中...')}>如何创建优惠券</li>
              <li className={style['announcement_li']} onClick={() => message.info('开发中...')}>互动营销使用教程</li>
              <li className={style['announcement_li']} onClick={() => message.info('开发中...')}>如何用ai设计一张海报</li>
              <li className={style['announcement_li']} onClick={() => message.info('开发中...')}>如何升级套餐</li>
            </ul>
          </Card>
        </Col>
      </Row>
      <NoticeModal ref={noticeRef} />
    </PageHeaderWrapper>
  )
}